接下來想介紹動態相關的JavaScript Library中，發展相當久、專門處理動態效果的 GSAP(GreenSock Animation Platform)；GSAP具有檔案小效能高的優點，且瀏覽器的支援度高，適合應用於專案中專門來處理動態效果。
目前最新版本為GSAP3，一樣提供不同的環境設置方式，這邊一樣使用最簡便的CDN，在<head></head>間引入即可。
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
</head>
Tween 建立動畫
指定網頁元件、動態效果(關鍵影格)以及動畫進行時間。以最基本的gsap.to()為例，傳入函數的第一個值為指定的元件，第二個值使用則為包含動畫結束狀態與時間duration的物件，像是：{rotation: 27,opacity: 0.5, duration: 1}。
gsap.to()和gsap.from()：gsap.to()定義的CSS是動畫的最後狀態，也就是讓這個網頁元件依照時間定義，從原本的狀態變成這裡定義的樣子；而gsap.from()則相反，這裡定義的是開始狀態。gsap.fromTo()：這個函式則融合上方的函式，開始與結束狀態都在這裡先定義好，因此第一個值指定好元件後，第二個和第三個值則分別加入開始與結束狀態物件，一樣需加入時間duration屬性。gsap.to("#my-div", {rotation: 27, x: 100, duration: 1});
gsap.fromTo("#my-div", {opacity: 0}, {opacity: 0.5, duration: 1});
可以發現，像是之前的jQuery甚至是原生的CSS與JavaScript，要建立動態效果都會需要先指定網頁元件、提供關鍵影格狀態以及定義動態進行的時間，只是寫法不同而已。
iThome鐵人賽
看影片追技術